<template>
  <el-popover
    placement="bottom-end"
    width="70"
    trigger="manual"
    v-model="visible"
    @show="showPopover"
    popper-class="my-popover"
  >
    <el-input
      v-model="value"
      ref="search"
    ></el-input>
    <div
      slot="reference"
      style="position:absolute;right:0"
      @click.stop="popClick"
    >
      <i class="el-icon-search" style=""></i>
    </div>
  </el-popover>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      visible: false,
    };
  },
  props: {
    searchWord: {
      type: String,
      default: ''
    },
  },
  watch: {
    value(newVal) {
      this.$emit('change', newVal)
      // console.log(newVal);
    },
  },
  methods: {
    showPopover() {
      this.$nextTick(() => {
        this.$refs.search.focus();
      });
    },
    popClick() {
      this.visible = !this.visible;
    },
  },
};
</script>

<style>
.my-popover {
  padding: 0;
}
</style>
